import { Button } from '../components/Button';
import { ImageWithLoading } from '../components/ImageWithLoading';
import { ArrowRight, CheckCircle } from 'lucide-react';
import { usePageTitle, PAGE_TITLES } from '../lib/usePageTitle';

export function AboutPage() {
  usePageTitle(PAGE_TITLES.ABOUT);
  
  return <div className="w-full bg-[#0a2540] text-white">
      {/* Hero Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-5xl md:text-7xl font-extrabold mb-6">
              OUR MISSION
            </h1>
            <p className="text-xl md:text-2xl mb-12 text-gray-200">
              To become the most trusted resource for health and wellness
              product recommendations, helping you make informed decisions for a
              better life.
            </p>
          </div>
        </div>
      </section>
      {/* Our Story Section */}
      <section className="py-20 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-4xl font-bold mb-6">OUR STORY</h2>
              <p className="text-gray-300 mb-4">
                VitaIncubator was born out of frustration. Our founders spent
                countless hours researching health products online, only to be
                disappointed by biased reviews and misleading information.
              </p>
              <p className="text-gray-300 mb-4">
                We set out to create something different: a platform where every
                review is thorough, honest, and backed by real testing. No
                shortcuts, no paid promotions disguised as reviews.
              </p>
              <p className="text-gray-300">
                Since 2020, we've helped over 50,000 people make better health
                and wellness purchases, saving them money and disappointment
                while guiding them to products that truly enhance their lives.
              </p>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden">
              <ImageWithLoading 
                src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" 
                alt="Our team testing products" 
                className="w-full h-full object-cover" 
              />
            </div>
          </div>
        </div>
      </section>
      {/* Our Process Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-4xl font-bold mb-6">OUR PROCESS</h2>
            <p className="text-xl text-gray-300">
              We follow a rigorous methodology to ensure our recommendations are
              trustworthy and valuable.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-[#061a2c] p-8 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-6">
                <span className="text-[#06d6a0] text-xl font-bold">1</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Research & Selection</h3>
              <p className="text-gray-300">
                We identify the most promising products in each category based
                on specifications, user feedback, and market reputation.
              </p>
            </div>
            <div className="bg-[#061a2c] p-8 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-6">
                <span className="text-[#06d6a0] text-xl font-bold">2</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Independent Purchase</h3>
              <p className="text-gray-300">
                We buy all products with our own money. We never accept free
                samples from manufacturers to ensure our reviews remain
                unbiased.
              </p>
            </div>
            <div className="bg-[#061a2c] p-8 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-6">
                <span className="text-[#06d6a0] text-xl font-bold">3</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Extensive Testing</h3>
              <p className="text-gray-300">
                Each product undergoes weeks or months of real-world testing by
                our team of experts in relevant fields.
              </p>
            </div>
            <div className="bg-[#061a2c] p-8 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-6">
                <span className="text-[#06d6a0] text-xl font-bold">4</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Detailed Analysis</h3>
              <p className="text-gray-300">
                We evaluate each product across multiple criteria:
                effectiveness, durability, ease of use, value for money, and
                more.
              </p>
            </div>
            <div className="bg-[#061a2c] p-8 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-6">
                <span className="text-[#06d6a0] text-xl font-bold">5</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Peer Review</h3>
              <p className="text-gray-300">
                Our reviews undergo internal peer review to ensure accuracy,
                thoroughness, and clarity before publication.
              </p>
            </div>
            <div className="bg-[#061a2c] p-8 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-6">
                <span className="text-[#06d6a0] text-xl font-bold">6</span>
              </div>
              <h3 className="text-2xl font-bold mb-4">Regular Updates</h3>
              <p className="text-gray-300">
                We revisit and update our reviews as products evolve or new
                competitors emerge to ensure our recommendations stay current.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Affiliate Disclosure Section */}
      <section className="py-20 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-4xl font-bold mb-6">AFFILIATE DISCLOSURE</h2>
            <div className="bg-[#0a2540] p-8 rounded-lg">
              <p className="text-gray-300 mb-4">
                VitaIncubator participates in affiliate programs with Amazon,
                Walmart, and other retailers. When you click on our links and
                make a purchase, we may earn a commission at no additional cost
                to you.
              </p>
              <p className="text-gray-300 mb-4">
                However, this financial relationship{' '}
                <span className="font-bold text-white">never</span> influences
                our recommendations or reviews. Our editorial process is
                completely independent from our affiliate partnerships.
              </p>
              <p className="text-gray-300 mb-8">
                We often recommend products that earn us no commission at all if
                we believe they're the best choice for our readers. Our
                reputation and your trust are far more valuable to us than any
                affiliate income.
              </p>
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex items-start">
                  <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={20} />
                  <p className="text-gray-300">
                    We purchase all products ourselves
                  </p>
                </div>
                <div className="flex items-start">
                  <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={20} />
                  <p className="text-gray-300">
                    We never accept free products for review
                  </p>
                </div>
                <div className="flex items-start">
                  <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={20} />
                  <p className="text-gray-300">
                    We never allow paid placements
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Team Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold mb-12 text-center">OUR TEAM</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="relative w-48 h-48 mx-auto mb-6 rounded-full overflow-hidden">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" 
                  alt="David Chen" 
                  className="w-full h-full object-cover" 
                />
              </div>
              <h3 className="text-2xl font-bold mb-2">David Chen</h3>
              <p className="text-[#06d6a0] mb-4">Founder & CEO</p>
              <p className="text-gray-300">
                Former product designer with 15+ years experience in fitness
                technology.
              </p>
            </div>
            <div className="text-center">
              <div className="relative w-48 h-48 mx-auto mb-6 rounded-full overflow-hidden">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" 
                  alt="Sarah Johnson" 
                  className="w-full h-full object-cover" 
                />
              </div>
              <h3 className="text-2xl font-bold mb-2">Sarah Johnson</h3>
              <p className="text-[#06d6a0] mb-4">Head of Research</p>
              <p className="text-gray-300">
                Exercise physiologist with a background in sports science
                research.
              </p>
            </div>
            <div className="text-center">
              <div className="relative w-48 h-48 mx-auto mb-6 rounded-full overflow-hidden">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" 
                  alt="Michael Rodriguez" 
                  className="w-full h-full object-cover" 
                />
              </div>
              <h3 className="text-2xl font-bold mb-2">Michael Rodriguez</h3>
              <p className="text-[#06d6a0] mb-4">Lead Product Tester</p>
              <p className="text-gray-300">
                Certified personal trainer specializing in recovery techniques.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Contact CTA */}
      <section className="py-20 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl font-bold mb-6">GET IN TOUCH</h2>
          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
            Have questions about our process? Want to suggest a product for
            review? We'd love to hear from you.
          </p>
          <Button size="lg" href="/contact">
            Contact Us <ArrowRight className="ml-2" size={20} />
          </Button>
        </div>
      </section>
    </div>;
}